<template>
  <div class="customerLabel">
    <div class="top-fun clearfix">
      <div
        @click="edit({}, 'add')"
        class="add-btn fl"
        v-functions="['customer_config_label_insert']"
      >
        <i class="el-icon-plus" />新增
      </div>
      <div class="choose-btn fr">
        <div class="btn" :class="{ active: !this.type }" @click="handleShow(0)">
          全部
        </div>
        <div class="btn" :class="{ active: this.type }" @click="handleShow(1)">
          启用
        </div>
      </div>
    </div>
    <div class="urlList" v-if="group.length > 0">
      <draggable v-model="group" handle=".move" animation="150" @end="saveData">
        <div
          class="urlListItem"
          v-for="(item, index) in group"
          :key="index"
          v-show="type === 1 ? item.enabled : true"
        >
          <div
            class="move"
            style="cursor: move; margin-right: 20px"
            title="拖动排序"
          >
            <i
              style="font-size: 12px; color: #b3b9c7"
              class="V7_iconfont V7_iconV7tubiao_yidong"
            ></i>
          </div>
          <el-color-picker
            v-model="item.color"
            size="small"
            @change="saveItem(item, index, 'color')"
          ></el-color-picker>
          <div class="url">
            {{ item.name }}
          </div>
          <el-switch
            v-model="item.enabled"
            :disabled="disableRole"
            @change="saveItem(item, index, 'enabled')"
          ></el-switch>
          <el-dropdown
            v-functions="[
              'customer_config_label_edit',
              'customer_config_label_delete',
            ]"
          >
            <i
              class="V7_iconfont V7_iconV7tubiao_shusandian"
              style="margin-left: 16px"
            ></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                @click.native="edit(item, 'edit')"
                v-functions="['customer_config_label_edit']"
                >编辑</el-dropdown-item
              >
              <el-dropdown-item
                @click.native="remove(index, item)"
                v-functions="['customer_config_label_delete']"
                style="color: #fc6c5c"
                >删除</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </draggable>
    </div>
    <EditLabel ref="EditLabel" @refresh="getData"></EditLabel>
  </div>
</template>

<script lang="ts">
/**
 * 客户标签
 */
import { Component, Vue, Ref } from 'vue-property-decorator';
import { commonAction, deepClone } from '@/utils/common'
import { checkPermission } from '@/utils/directive'
import draggable from 'vuedraggable'
import EditLabel from './EditLabel.vue'
import { CommonModule } from '@/store/modules/common';
@Component({
  name: 'CustomerLabel',
  components: { draggable, EditLabel }
})
export default class CustomerLabel extends Vue {
  @Ref() private readonly EditLabel
  [x: string]: any
  private required = true
  private type = 0
  private group = []
  private disableRole = true
  private bakGroup = [] // 备份的数据，用于排序

  private handleShow (val: number) {
    this.type = val
  }

  // 获取客户标签的配置
  private async getData () {
    commonAction({ url: '/server-crm/action/config/customer/label/list', method: 'post', data: {} }).then(res => {
      if (res.success && res.data) {
        this.group = res.data.list || []
        this.bakGroup = deepClone(this.group)
      }
    })
  }

  private mounted () {
    this.getData()
    if (checkPermission(null, { value: ['customer_config_label_enable'] })) { // 停用，启用的权限
      this.disableRole = false
    }
  }

  private edit (item, type) {
    if (this.group.length >= 50 && type === 'add') {
      return this.$message.error('最多允许添加50个标签')
    }
    this.EditLabel.openDraw(item, type)
  }

  private remove (index: number, item: any) {
    this.$confirm('删除后所有已打上该标签的数据均自动清空所选标签，请确认是否删除?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      commonAction({ url: '/server-crm/action/config/customer/label/delete', method: 'post', data: { _id: item._id } }).then(res => {
        if (res.success) {
          this.group.splice(index, 1)
          this.bakGroup = deepClone(this.group)
          this.$deleteCache('customerAllLabels', '_id', item._id, true)
        }
      })
    })
  }

  // 拖动排序之后保存数据
  private saveData (data: any) {
    const oldObj: any = this.bakGroup[data.oldIndex]
    const newObj: any = this.group[data.newIndex - 1] || null
    const actionData = { _id: oldObj._id, afterLabel: newObj ? newObj._id : null }
    commonAction({ url: '/server-crm/action/config/customer/label/sort', method: 'post', data: actionData }).then(res => {
      if (res.success) {
        this.$message({ message: '保存成功', type: 'success' })
        this.bakGroup = deepClone(this.group)
      }
    })
  }

  // 切换状态或者改变颜色保存数据
  private saveItem (item, index, type) {
    if (!item.color) {
      this.$set(this.group[index], 'color', '#333333')
    }
    commonAction({ url: '/server-crm/action/config/customer/label/update', method: 'post', data: item }).then(res => {
      if (res.success && res.data) {
        this.$message({ message: '保存成功', type: 'success' })
        this.bakGroup = deepClone(this.group)
        this.$updateCacheBySingleKey('customerAllLabels', { _id: res.data._id, key: type, value: res.data[type] }, '_id', true)
      }
    })
  }
}
</script>
<style lang="stylus" scoped>
>>> .el-color-picker--small
  height 40px
  line-height 40px
  .el-color-picker__trigger
    width 16px
    height 16px
    border-radius 50%
    padding 0
    margin 12px 0
    .el-color-picker__color-inner
      border-radius 50%
      border 1px solid #E7E9ED
    .el-color-picker__icon
      display none
.customerLabel
  padding 16px
  border-radius 10px
  height 100%
  overflow auto
  box-sizing border-box
  margin 0 2px 2px 0
  border 1px solid #ecf0f3
  box-shadow 0px 0px 4px 0px #e0e6f0,0px 1px 4px 0px #e0e6f0
  .top-fun
    .choose-btn
      width 120px
      height 32px
      background #EFF3F8
      border-radius 4px
      display flex
      padding 2px
      .btn
        width 57px
        height 28px
        line-height 28px
        text-align center
        font-size 12px
        font-family PingFang SC
        font-weight 600
        color #767E91
        border-radius 4px
        cursor pointer
        &.active
          color #303753
          background #fff
    .add-btn
      width 70px
      height 32px
      line-height 32px
      text-align center
      border 1px solid #E7E9ED
      border-radius 4px
      font-size 12px
      color #008BEE
      cursor pointer
      .el-icon-plus
        margin-right 4px
  .urlList
    width 100%
    margin-top 24px
    border-top 1px solid #ECF0F3
    padding-top 24px
    .urlListItem
      border 1px solid #E7E9ED
      font-size 12px
      width 300px
      height 40px
      display inline-flex
      align-items center
      border-radius 4px
      padding 12px 12px 12px 16px
      margin 0 30px 20px 0
      .url
        flex 1
        overflow hidden
        text-overflow ellipsis
        white-space nowrap
        margin-left 7px
      i
        font-size 24px
        color #767E91
        cursor pointer
      i:hover
        color $c-main
</style>
